<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>智能园区大屏索引</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  <style>
    body {
      background: #101a2b;
      margin: 0;
      padding: 0;
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      color: #e4f1fe;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    
    .screen-header {
      width: 100vw;
      max-width: 100vw;
      height: 120px;
      background: linear-gradient(90deg, rgba(64,158,255,0.18) 0%, rgba(56,189,248,0.12) 100%);
      box-shadow: 0 4px 32px 0 rgba(64,158,255,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 10;
      margin-bottom: 4vh;
    }
    
    .screen-header-title {
      font-size: 3.2vw;
      color: #38bdf8;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-shadow: 0 0 24px #38bdf8cc, 0 2px 0 #0f1a40;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 2vw;
      user-select: none;
    }
    
    .screen-header-title .fa {
      font-size: 2.6vw;
      margin-right: 1.5vw;
      color: #FFD700;
      filter: drop-shadow(0 0 8px #FFD70088);
    }
    
    .main-container {
      width: 1400px;
      max-width: 95vw;
      height: 70vh;
      min-height: 600px;
      background: rgba(20, 30, 60, 0.92);
      border-radius: 24px;
      box-shadow: 0 0 48px 0 rgba(0,191,255,0.15), 0 0 0 3px rgba(64,158,255,0.15) inset;
      border: 2px solid rgba(64,158,255,0.25);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 0;
      backdrop-filter: blur(8px);
    }
    
    .container-title {
      font-size: 28px;
      font-weight: 600;
      color: #38bdf8;
      letter-spacing: 3px;
      text-align: center;
      margin: 40px 0 20px 0;
      text-shadow: 0 0 15px #38bdf844;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .container-title .fa {
      margin-right: 15px;
      color: #FFD700;
      filter: drop-shadow(0 0 8px #FFD70088);
    }
    
    .button-grid {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 60px;
      padding: 40px;
    }
    
    .screen-button {
      width: 320px;
      height: 280px;
      background: linear-gradient(135deg, rgba(64,158,255,0.15) 0%, rgba(56,189,248,0.10) 100%);
      border: 2px solid rgba(64,158,255,0.25);
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 32px rgba(64,158,255,0.1);
    }
    
    .screen-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
      transition: left 0.6s;
    }
    
    .screen-button:hover::before {
      left: 100%;
    }
    
    .screen-button:hover {
      transform: translateY(-12px) scale(1.05);
      border-color: rgba(64,158,255,0.5);
      box-shadow: 0 20px 60px rgba(64,158,255,0.25), 0 0 0 1px rgba(64,158,255,0.3) inset;
      background: linear-gradient(135deg, rgba(64,158,255,0.25) 0%, rgba(56,189,248,0.18) 100%);
    }
    
    .screen-button:active {
      transform: translateY(-8px) scale(1.02);
      transition: all 0.1s;
    }
    
    .button-icon {
      font-size: 64px;
      color: #38bdf8;
      margin-bottom: 20px;
      filter: drop-shadow(0 0 12px #38bdf8cc);
      transition: all 0.3s;
    }
    
    .screen-button:hover .button-icon {
      color: #FFD700;
      filter: drop-shadow(0 0 16px #FFD700cc);
      transform: scale(1.1);
    }
    
    .button-title {
      font-size: 24px;
      font-weight: 600;
      color: #e4f1fe;
      margin-bottom: 12px;
      text-shadow: 0 0 8px #38bdf844;
      transition: all 0.3s;
    }
    
    .screen-button:hover .button-title {
      color: #FFD700;
      text-shadow: 0 0 12px #FFD70044;
    }
    
    .button-desc {
      font-size: 16px;
      color: #94a3b8;
      text-align: center;
      line-height: 1.5;
      transition: all 0.3s;
    }
    
    .screen-button:hover .button-desc {
      color: #b6c7e3;
    }
    
    .button-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0;
      height: 0;
      background: radial-gradient(circle, rgba(64,158,255,0.3) 0%, transparent 70%);
      border-radius: 50%;
      transition: all 0.4s;
      pointer-events: none;
    }
    
    .screen-button:hover .button-glow {
      width: 200px;
      height: 200px;
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    
    .screen-button.pulse {
      animation: pulse 2s infinite;
    }
    
    @media (max-width: 1200px) {
      .button-grid {
        gap: 40px;
        padding: 30px;
      }
      .screen-button {
        width: 280px;
        height: 240px;
      }
      .button-icon {
        font-size: 56px;
      }
      .button-title {
        font-size: 22px;
      }
    }
    
    @media (max-width: 900px) {
      .screen-header-title {
        font-size: 24px;
      }
      .screen-header-title .fa {
        font-size: 20px;
      }
      .container-title {
        font-size: 22px;
      }
      .button-grid {
        flex-direction: column;
        gap: 30px;
        padding: 20px;
      }
      .screen-button {
        width: 300px;
        height: 200px;
      }
      .button-icon {
        font-size: 48px;
        margin-bottom: 15px;
      }
      .button-title {
        font-size: 20px;
        margin-bottom: 8px;
      }
      .button-desc {
        font-size: 14px;
      }
    }
    
    @media (max-width: 600px) {
      .screen-header {
        height: 80px;
        margin-bottom: 2vh;
      }
      .screen-header-title {
        font-size: 20px;
        padding: 0 10px;
      }
      .screen-header-title .fa {
        font-size: 16px;
      }
      .main-container {
        width: 95vw;
        height: 80vh;
        min-height: 500px;
      }
      .container-title {
        font-size: 18px;
        margin: 20px 0 10px 0;
      }
      .button-grid {
        gap: 20px;
        padding: 15px;
      }
      .screen-button {
        width: 280px;
        height: 180px;
      }
      .button-icon {
        font-size: 40px;
        margin-bottom: 12px;
      }
      .button-title {
        font-size: 18px;
        margin-bottom: 6px;
      }
      .button-desc {
        font-size: 12px;
      }
    }
  </style>
</head>
<body>
  <div class="screen-header">
    <div class="screen-header-title">
      <i class="fa-solid fa-tv"></i>
      智能园区大屏管理系统
    </div>
  </div>
  
  <div class="main-container">
    <div class="container-title">

    </div>
    
    <div class="button-grid">
      <div class="screen-button" onclick="openScreen('dashboard')">
        <div class="button-glow"></div>
        <i class="fa-solid fa-chart-line button-icon"></i>
        <div class="button-title">大屏轮播</div>
        <div class="button-desc">综合数据大屏展示<br>实时监控园区整体状况</div>
      </div>
      
      <div class="screen-button" onclick="openScreen('parking')">
        <div class="button-glow"></div>
        <i class="fa-solid fa-user button-icon"></i>
        <div class="button-title">户内工单告警轮播</div>
        <div class="button-desc">户内工单告警轮播大屏<br>车位状态实时展示</div>
      </div>
      
      <div class="screen-button" onclick="openScreen('machine-room')">
        <div class="button-glow"></div>
        <i class="fa-solid fa-server button-icon"></i>
        <div class="button-title">机房轮播</div>
        <div class="button-desc">机房监控大屏<br>设备状态告警展示</div>
      </div>
    </div>
  </div>

  <script>
    function openScreen(type) {
      // 添加点击动画效果
      const button = event.currentTarget;
      button.classList.add('pulse');
      
      // 根据类型跳转到对应页面
      let targetUrl = '';
      switch(type) {
        case 'dashboard':
          targetUrl = 'dashboard.html';
          break;
        case 'parking':
          targetUrl = 'incident-command-board.html';
          break;
        case 'machine-room':
          targetUrl = 'machine-room-carousel.html';
          break;
        default:
          console.log('未知的大屏类型:', type);
          return;
      }
      
      // 延迟跳转以显示动画效果
      setTimeout(() => {
        window.location.href = targetUrl;
      }, 300);
    }
    
    // 页面加载完成后的初始化
    window.onload = function() {
      // 添加页面进入动画
      const buttons = document.querySelectorAll('.screen-button');
      buttons.forEach((button, index) => {
        button.style.opacity = '0';
        button.style.transform = 'translateY(30px)';
        
        setTimeout(() => {
          button.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
          button.style.opacity = '1';
          button.style.transform = 'translateY(0)';
        }, index * 200);
      });
      
      // 添加键盘快捷键支持
      document.addEventListener('keydown', function(event) {
        switch(event.key) {
          case '1':
            openScreen('dashboard');
            break;
          case '2':
            openScreen('parking');
            break;
          case '3':
            openScreen('machine-room');
            break;
          case 'Escape':
            // 返回后台管理系统
            if (window.parent && window.parent !== window) {
              window.parent.postMessage({ type: 'goBack' }, '*');
            }
            break;
        }
      });
      
      // 添加鼠标移动光效
      document.addEventListener('mousemove', function(event) {
        const buttons = document.querySelectorAll('.screen-button');
        buttons.forEach(button => {
          const rect = button.getBoundingClientRect();
          const x = event.clientX - rect.left;
          const y = event.clientY - rect.top;
          
          if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {
            const glow = button.querySelector('.button-glow');
            if (glow) {
              glow.style.left = x + 'px';
              glow.style.top = y + 'px';
            }
          }
        });
      });
    };
    
    // 防止页面刷新
    window.addEventListener('beforeunload', function(event) {
      event.preventDefault();
      event.returnValue = '';
    });
  </script>
</body>
</html>
